<script setup lang="ts" name="EaInvoice">
import { Plus, Search, ArrowDown } from '@element-plus/icons-vue'
import type { EaInvoice } from './type'

const baseApi = '/ea/ea-invoice'

const { queryParam, loading, dataList, pagination, getList, onSearch, resetFilter, remove, batchRemove } =
  useList<EaInvoice>({
    baseApi,
    initQueryParam: {
      type: '1'
    }
  })

defineExpose({
  refresh: onSearch,
  addCondition: (key: keyof EaInvoice, value: any, refresh = false) => {
    queryParam[key] = value
    if (refresh) onSearch()
  }
})

const { initRelatedData, relatedData } = useOption({
  dict: ['invoice']
})
initRelatedData()

const sortChange = ({ column, prop, order }: { column: { sortBy?: string }; prop: string; order: string }) => {
  let orderBy: 'ASC' | 'DESC' | undefined
  switch (order) {
    case 'ascending':
      orderBy = 'ASC'
      break
    case 'descending':
      orderBy = 'DESC'
      break
    default:
      orderBy = undefined
  }
  pagination.orderBy = orderBy ? `${column.sortBy ?? prop}:${orderBy}` : undefined
  onSearch()
}

const handleOperation = (code: string, value?: string | string[]) => {
  switch (code) {
    case 'remove':
      remove(value as string)
      break
    case 'batchRemove':
      batchRemove(value as string[])
      break
    default:
      throw new Error(`不存在的操作编码${code}!`)
  }
}

const refreshData = (haveNewData?: boolean) => {
  haveNewData ? onSearch() : getList()
}

const router = useRouter()

const activated = () => {
  nextTick(() => {
    const query = router.currentRoute.value.query
    for (const queryKey in query) {
      queryParam[queryKey as keyof EaInvoice] = query[queryKey] as any
    }

    onSearch()
  })
}

router.currentRoute.value.meta.keepAlive ? onActivated(activated) : activated()
</script>

<template>
  <div class="list-page">
    <el-space wrap class="list-operation">
      <el-radio-group v-model="queryParam.type" @change="onSearch">
        <el-radio-button value="1">企业</el-radio-button>
        <el-radio-button value="0">个人</el-radio-button>
      </el-radio-group>

      <el-space>
        <!-- <span class="search">
          <el-select v-model="queryParam.type" placeholder="抬头类型" filterable clearable @change="onSearch">
            <el-option v-for="item in relatedData.invoiceOptions" :key="item.value" v-bind="item" />
          </el-select>
        </span> -->
        <el-button :icon="Search" type="primary" @click="onSearch">查询</el-button>
        <el-button title="重置查询条件" @click="resetFilter">重置</el-button>
      </el-space>
    </el-space>

    <el-table
      ref="tableRef"
      v-loading="loading"
      class="list-body"
      :data="dataList"
      height="100%"
      stripe
      row-key="id"
      style="border-top: 1px solid var(--el-border-color-lighter)"
      @sort-change="sortChange"
    >
      <el-table-column label="用户" prop="memberIdLabel" show-overflow-tooltip align="center" />
      <el-table-column label="发票抬头" prop="name" show-overflow-tooltip align="center" />
      <el-table-column label="抬头类型" prop="typeLabel" show-overflow-tooltip align="center">
        <template #default="{ row }: { row: EaInvoice }">
          <el-tag
            v-if="row.typeLabel"
            type="info"
            :color="(row.typeLabel as LabelValue<{ color?: string }>).ext?.color"
          >
            {{ (row.typeLabel as LabelValue).label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="queryParam.type === '1'" label="税号" prop="taxId" show-overflow-tooltip align="center" />
      <el-table-column
        v-if="queryParam.type === '1'"
        label="地址"
        prop="address"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column v-if="queryParam.type === '1'" label="电话" prop="phone" show-overflow-tooltip align="center" />
      <el-table-column
        v-if="queryParam.type === '1'"
        label="开户银行"
        prop="bank"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        v-if="queryParam.type === '1'"
        label="开户银行号"
        prop="bankNumber"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column label="电子邮箱" prop="email" show-overflow-tooltip align="center" />
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip align="center" />
    </el-table>

    <el-pagination
      v-if="pagination.total"
      v-model:current-page="pagination.current"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 15, 20, 30, 50, 100]"
      small
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="getList()"
      @current-change="getList()"
    />
  </div>
</template>

<style scoped lang="scss"></style>
